Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@solid-primitives/keyboard

Package Overview
Dependencies
Maintainers
3
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@solid-primitives/keyboard

A library of reactive promitives helping handling user's keyboard input.

  • 1.2.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

Solid Primitives keyboard

@solid-primitives/keyboard

lerna size version stage

A library of reactive promitives helping handling user's keyboard input.

Installation

npm install @solid-primitives/keyboard
# or
pnpm add @solid-primitives/keyboard
# or
yarn add @solid-primitives/keyboard

useKeyDownEvent

Provides a signal with the last keydown event.

This is a singleton root primitive that will reuse event listeners and signals across dependents.

How to use it

useKeyDownEvent takes no arguments, and returns a signal with the last keydown event.

import { useKeyDownEvent } from "@solid-primitives/keyboard";

const event = useKeyDownEvent();

createEffect(() => {
  const e = event();
  console.log(e); // => KeyboardEvent | null

  if (e) {
    console.log(e.key); // => "Q" | "ALT" | ... or null
    e.preventDefault(); // prevent default behavior or last keydown event
  }
});

useKeyDownList

Provides a signal with the list of currently held keys, ordered from least recent to most recent.

This is a singleton root primitive that will reuse event listeners and signals across dependents.

How to use it

useKeyDownList takes no arguments, and returns a signal with the list of currently held keys

import { useKeyDownList } from "@solid-primitives/keyboard";

const keys = useKeyDownList();

createEffect(() => {
  console.log(keys()); // => string[] — list of currently held keys
});

<For each={keys()}>
  {key => <kbd>{key}</kdb>}
</For>

useCurrentlyHeldKey

Provides a signal with the currently held single key. Pressing any other key at the same time will reset the signal to null.

This is a singleton root primitive that will reuse event listeners and signals across dependents.

How to use it

useCurrentlyHeldKey takes no arguments, and returns a signal with the currently held single key.

import { useCurrentlyHeldKey } from "@solid-primitives/keyboard";

const key = useCurrentlyHeldKey();

createEffect(() => {
  console.log(key()); // => string | null — currently held key
});

useKeyDownSequence

Provides a signal with a sequence of currently held keys, as they were pressed down and up.

This is a singleton root primitive that will reuse event listeners and signals across dependents.

How to use it

useKeyDownSequence takes no arguments, and returns a single signal.

import { useKeyDownSequence } from "@solid-primitives/keyboard";

const sequence = useKeyDownSequence();

createEffect(() => {
  console.log(sequence()); // => string[][] — sequence of currently held keys
});

// example sequence of pressing Ctrl + Shift + A
// [["Control"], ["Control", "Shift"], ["Control", "Shift", "A"]]

createKeyHold

Provides a boolean signal indicating if provided key is currently being held down.

Holding multiple keys at the same time will return false — holding only the specified one will return true.

How to use it

createKeyHold takes two arguments:

  • key keyboard key to listen for
  • options additional configuration:
    • preventDefault — call e.preventDefault() on the keyboard event, when the specified key is pressed. (Defaults to true)
import { createKeyHold } from "@solid-primitives/keyboard";

const pressing = createKeyHold("Alt", { preventDefault: false });

<p>Is pressing Alt? {pressing() ? "YES" : "NO"}</p>;

createShortcut

Creates a keyboard shotcut observer. The provided callback will be called when the specified keys are pressed.

How to use it

createShortcut takes three arguments:

  • keys — list of keys to listen for
  • callback — callback to call when the specified keys are pressed
  • options — additional configuration:
    • preventDefault — call e.preventDefault() on the keyboard event, when the specified key is pressed. (Defaults to true)
    • requireReset — If true, the shortcut will only be triggered once until all of the keys stop being pressed. Disabled by default.
import { createShortcut } from "@solid-primitives/keyboard";

createShortcut(
  ["Control", "Shift", "A"],
  () => {
    console.log("Shortcut triggered");
  },
  { preventDefault: false, requireReset: true },
);

Preventing default

When preventDefault is true, e.preventDefault() will be called not only on the keydown event that have triggered the callback, but it will optimistically also prevend the default behavior of every previous keydown that will have the possibility to lead to the shotcut being pressed.

E.g. when listening for Control + Shift + A, all three keydown events will be prevented.

DEMO

Working demo of some of the primitives in keyboard package:

https://codesandbox.io/s/solid-primitives-keyboard-demo-s2l84k?file=/index.tsx

Changelog

See CHANGELOG.md

Keywords

FAQs

Package last updated on 05 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc